<template>
  <div class="headBox">
    <ReloadOutlined class="icon" @click="reload"  />
    <div style="display:flex;">
        <a-dropdown v-if="weatherInfo.city">
          <span class="weatherInfoBox">{{ weatherInfo.city + '今日天气' }}</span>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                天气：{{ weatherInfo.weather }}
              </a-menu-item>
              <a-divider class="divider" />
              <a-menu-item>
                温度：{{ weatherInfo.temperature }}°C
              </a-menu-item>
              <a-divider class="divider" />
              <a-menu-item>
                湿度：{{ weatherInfo.humidity }}%
              </a-menu-item>
              <a-divider class="divider" />
              <a-menu-item>
                风向：{{ weatherInfo.winddirection }}
              </a-menu-item>
              <a-divider class="divider" />
              <a-menu-item>
                风力：{{ weatherInfo.windpower }}级
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
        <a-dropdown>
          <div class="headerAction">
            <img alt="头像" class="avatar" v-if="!user.profilePicture && user.sex == 0" src="../assets/img/boy.png" />
            <img alt="头像" class="avatar" v-else-if="!user.profilePicture && user.sex == 1" src="../assets/img/girl.png" />
            <img alt="头像" class="avatar" v-else :src=" proxy.PicPrefixUrl + user.profilePicture" />
            <span class="nickName">{{ user.name }}</span>
          </div>
          <template #overlay>
            <a-menu>
              <a-menu-item @click="() => { router.push('/other/personalCenter')  }">
                <UserOutlined />
                <a class="operationItem">个人中心</a>
              </a-menu-item>
              <a-divider class="divider" />
              <a-menu-item @click="loginOut">
                <LoginOutlined />
                <a href="javascript:;" class="operationItem">退出登录</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
    </div>

  </div>
</template>

<script setup lang="ts">
      import {
        ReloadOutlined,
        UserOutlined,
        LoginOutlined
      } from '@ant-design/icons-vue';

      import { useRouter } from "vue-router"

      import useHead from '@/hooks/useHead';

      import { getCurrentInstance } from "vue"

      const { proxy } = getCurrentInstance() as any;

      const { reload , user , loginOut , weatherInfo } = useHead();

      const router = useRouter();


</script>

<style scoped lang="scss">
  .operationItem {
    margin-left: 6px !important;
  }
  .divider {
    margin: 0 !important;
  }
  .headBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 22px;
    box-shadow: 0 1px 4px rgba(0,21,41,.08) !important;
    background-color: #fff;
    height: 100%;

    width: 100%;
    .weatherInfoBox {
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      opacity: 0.8;
      color: black;
      margin-right: 22px;
      .weatherItem {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        justify-content: center;
      }
    }
    .icon {
      cursor: pointer;
      font-size: 18px;
      color: #001529;
    }
    .headerAction {
      display: flex;
      align-items: center;
      cursor: pointer;
      .avatar {
        width: 26px;
        height: 26px;
        border-radius: 50%;
      }
      .nickName {
        margin-left: 10px;
        font-size: 12px;
        color: #000000A6;
      }
    }
  }
</style>
